<script setup lang="ts">
import CrudPage from "@/components/CrudPage/index.vue";
import {
  createSysUserTag,
  getSysUserTagList,
  updateSysUserTag,
  SysUserTag
} from "../../api/sysUserTag";

import { ref } from "vue";
import { useSysUserTagProvider } from "./provider";

const query = ref<Record<string, any>>({});
const { columns } = useSysUserTagProvider();

const onShouldLoadData = async (
  pgs: any
): Promise<{ list: any[]; total: number }> => {
  const { data } = await getSysUserTagList(pgs);
  return { list: data.list, total: data.total };
};
</script>

<template>
  <div>
    <CrudPage
      title=""
      row-key="id"
      :create="{
        viewType: 'drawer',
        labelPosition: 'top',
        rowProps: { gutter: 20 },
        colProps: { span: 12 }
      }"
      :columns="columns"
      child-field="children"
      :get-data-list="onShouldLoadData"
      @edit-confirm="updateSysUserTag"
      @create-confirm="createSysUserTag"
    >
      <template #operation="{ row, edit }">
        <el-button type="text" @click="edit(row)">编辑</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </CrudPage>
  </div>
</template>
<style lang="scss" scoped></style>
